<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            function initialize() {
                var myLatLng = new google.maps.LatLng(0, -180);
                var myOptions = {
                    zoom: 3,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var flightPlanCoordinates = [
                    new google.maps.LatLng(37.772323, -122.214897),
                    new google.maps.LatLng(21.291982, -157.821856),
                    new google.maps.LatLng(-18.142599, 178.431),
                    new google.maps.LatLng(-27.46758, 153.027892)
                ];
                var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });

                flightPath.setMap(map);
            }
        </script>
    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </body>
</html>
